import MySearch from "@/components/my-search";
import { MyPagination } from "@/components/MyPagination";
import { title } from "@/components/primitives";
import { formattedDate } from "@/lib/dateFormat";
import { MyResponse, QueryIProps, request } from "@/lib/request";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { Divider } from "@heroui/divider";
import { Link } from "@heroui/link";
import { Pagination } from "@heroui/pagination";
import { CgDetailsMore } from "react-icons/cg";
import { CiBoxList, CiSearch } from "react-icons/ci";
import { SiFireship } from "react-icons/si";
import { TbMoodLookRight } from "react-icons/tb";
import { VscSearch } from "react-icons/vsc";
import type { Metadata } from 'next';
import { siteConfig } from "@/config/site";

interface Props {
  params: { query: string };
  searchParams: Object | any
}

export async function generateMetadata({ params, searchParams }: Props): Promise<Metadata> {
  const { query } = await params
  const { page } = await searchParams
  const pageSize = 20
  const myPage = page || 1
  const searchKey = decodeURIComponent(query?.[0] || "");
  const searchResult = await request<MyResponse>("/search", "GET", {
    keyword: searchKey,
    pageSize: pageSize,
    page: myPage
  })

  const list: any[] = searchResult?.data?.list

  if (!list?.length) {
    return {
      title: "短剧未找到",
      description: "该短剧可能已被删除或不存在。",
      keywords: '短剧, 电视剧, 短剧视频, 短剧剧情, 热门短剧, 短剧在线观看, 甜宠剧情, 演员, 导演', // 默认关键词
    };
  }
  const current = list[0];

  let url = `${siteConfig.url}/search`
  if (searchKey) {
    url = `${url}/${query?.[0]}`
  }
  if (page) {
    url = `${url}/${page}`
  }

  const description = `夸克4K-为您提供最新的短剧资源合集：《${current.title}》；收录海量短剧资源，包括最新短剧 软件工具 教程 游戏 影视 音乐 杂志 电子书 有声资源 素材模板...高质量资源分享`
  
  return {
    // 页面标题
    title: current.title,
    // 页面描述
    description: description,
    keywords: `免费短剧,热门短剧,短剧推荐,精品短剧,热门短剧,${current.title}`,
    // Open Graph 元数据
    openGraph: {
      title: current.title,
      description: description,
      type: 'article', // 或 'video.movie'
      images: [
        {
          url: "/images/Open1200.png",
          width: 1200,
          height: 630,
          alt: current.title,
        },
      ],
      section: '短剧',
      url: url
    },
    // Twitter 卡片信息
    twitter: {
      card: 'summary_large_image',
      title: current.title,
      description: description,
      images: [
        {
          url: "/images/Open1200.png",
          width: 1200,
          height: 630,
          alt: current.title,
        },
      ],
      site: siteConfig.twitter.site,  // 网站的官方 Twitter 账号
      creator: siteConfig.twitter.creator,  // 内容创作者的 Twitter 账号
    },
    // 其他 SEO 配置
    robots: {
      index: true,
      follow: true,
    },
    alternates: {
      canonical: url
    }
  };
}

export default async function AboutPage({ params, searchParams }: QueryIProps) {
  const { query } = await params
  const { page } = await searchParams
  const pageSize = 20

  const myPage = page || 1

  const decodedPath = decodeURIComponent(query?.[0] || "");

  const searchResult = await request<MyResponse>("/search", "GET", {
    keyword: decodedPath,
    pageSize: pageSize,
    page: myPage
  })

  const totalPages = Math.ceil(searchResult.data?.total / pageSize)
  const hotList = (await request<MyResponse>('/queryHotList', "GET", {}))
  return (
    <div>
      <MySearch />
      <Card className="mt-4" radius="none" >
        <CardHeader className="flex gap-3 ">
          <div className="w-full flex flex-row justify-between items-center">
            <div className="flex flex-row items-center text-[#006fee]">
              <VscSearch size={22} />
              <div className="flex flex-col">
                <p className="text-ls pl-2">搜索 "{decodedPath}"</p>
              </div>
            </div>
          </div>
        </CardHeader>
        <Divider />
        <CardBody>
          <div className="flex flex-col gap-3">
            {searchResult?.data?.list?.length == 0 ? <>
              <div className="text-center">没有查到哦！正在全网搜索中...</div>
            </> : <></>}
            {
              searchResult?.data?.list?.map((item: any) => {
                return <div key={item.id + 'shersso'}>
                  <span className="text-sm text-gray-500">{formattedDate(item.updatedAt)}</span>
                  <span className="ml-2 bg-[#edf0ff] text-sm p-1">{item.webdramaType}</span>
                  <Link href={`/details/${item.id}`} className="inline-block" target="_blank" color="foreground" underline="hover">
                    <span className="pl-2">{item.title}</span>
                  </Link>
                </div>
              })
            }

          </div>
          <div className="flex justify-center pt-6 pb-4">
            {totalPages ? <MyPagination myPage={myPage} filenName={decodedPath} totalPages={totalPages} /> : ''}
          </div>
        </CardBody>
      </Card >

      <Card className="mt-4" radius="none" >
        <CardHeader className="flex gap-3 ">
          <div className="w-full flex flex-row justify-between items-center">
            <div className="flex flex-row items-center text-red-500">
              <TbMoodLookRight size={22} />
              <div className="flex flex-col">
                <p className="text-lg ml-2">随便看看</p>
                {/* <p className="text-small text-default-500">heroui.com</p> */}
              </div>
            </div>
            <div className="text-red-500">
              万一你需要呢？
            </div>
          </div>
        </CardHeader>
        <Divider />
        <CardBody>
          <div className="flex flex-col gap-3">
            {
              hotList.data?.map((item: any) => {
                return (
                  <div key={item.id + "sgkkk"}>
                    <span className="text-sm text-gray-500">{item.view} 次</span>
                    <span className="ml-2 bg-[#edf0ff] text-sm p-1">{item.webdramaType}</span>
                    <Link href={`/details/${item.id}`} className="inline-block" color="foreground" underline="hover">
                      <span className="pl-2">{item.title}</span>
                    </Link>
                  </div>
                )
              })
            }
          </div>
        </CardBody>
      </Card >
    </div>
  );
}
